<template>
    <view class="homeLayout pageBg">
        <custom-nav-bar title='推荐'></custom-nav-bar>
        <!-- //轮播 -->
        <view class="banner">
            <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="white" autoplay
                circular>
                <swiper-item v-for="item in bannerList" :key="item._id">
                    <image :src="item.picurl" mode="scaleToFill" />
                </swiper-item>


            </swiper>
        </view>
        <!-- //公告 -->
        <view class="notice">
            <view class="left">
                <uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
                <text class="text">公告</text>
            </view>
            <view class="center">
                <swiper vertical autoplay interval="3000" duration="300" circular>
                    <swiper-item >
                        <navigator url="/pages/notice/detail">
                            心如壁纸，版权公告
                        </navigator>
                    </swiper-item>
                </swiper>
            </view>
            <view class="right">
                <uni-icons type="forward" size="16" color="#28b389"></uni-icons>
            </view>
        </view>
        <!-- //每日推荐 -->
        <view class="select">
            <common-title class="title">
                <template #name>每日推荐</template>
                <template #custom>
                    <view class="time">
                        <uni-icons type="calendar" size="16" color="#28b389" style="padding-right: 10rpx;"></uni-icons>
                        <view style="color:#28b389;font-size: 32rpx;">{{nowMonth}}月{{nowDate}}号</view>
                    </view>
                </template>
            </common-title>
            <view class="content">
                <scroll-view scroll-x>
                    <view class="box" v-for="item in dayRandomList" :key="item._id" @click="goPreview(item._id)">
                        <image  :src="item.smallPicurl" mode="aspectFill"></image>
                    </view>
                </scroll-view>
            </view>
        </view>
        <!-- //专题精选 -->
        <view class="theme">
            <common-title>
                <template #name>专题精选</template>
                <template #custom>
                    <navigator url="" class="more">更多</navigator>
                </template>
            </common-title>
            <view class="content">
                <theme-item v-for="item in clsaaify" :key="item._id" :classify="item"></theme-item>
                <theme-item :isMore="true"></theme-item>
            </view>

        </view>

    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue';
    import {
        apiGetDayRandom,
        apiGetBanner,
        apiNoticeList,
        apiGetClsaaify
    } from '../../api/apis.js'
    import {
        onShareAppMessage,
        onShareTimeline
    } from '@dcloudio/uni-app'
    const date = new Date()
    const nowDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
    const month = date.getMonth() + 1
    const nowMonth = month < 10 ? "0" + month : month
    const goPreview = (id) => {
        uni.setStorageSync("storgClassList",dayRandomList.value);
        uni.navigateTo({
            url: "/pages/preview/preview?id="+id
        })
    }
    onShareAppMessage((e) => {
        return {
            title: '心如壁纸',
            path: '/pages/index/index',

        }
    })
    onShareTimeline(() => {
        return {
            title: '心如壁纸',
            imageUrl:'/static/images/xinrubizilogo.jpg'
        }
    })
    //轮播图接口
    const bannerList = ref([])
    const getBanner = async () => {
        const res = await apiGetBanner()
        bannerList.value = res.data
    }

    //每日推荐接口
    const dayRandomList = ref([])
    const getDayRandom = async () => {
        const res = await apiGetDayRandom()
        dayRandomList.value = res.data
        console.log(dayRandomList.value);
    }

    //公告接口
    const noticeList = ref([])
    const getNotice = async () => {
        const res = await apiNoticeList({
            select: true
        })
        noticeList.value = res.data
    }

    //专题精华接口
    const clsaaify = ref([])
    const getClsaaify = async () => {
        const res = await apiGetClsaaify({
            select: true
        })
        clsaaify.value = res.data
        console.log(clsaaify.value);
    }

    getBanner()
    getDayRandom()
    getNotice()
    getClsaaify()
</script>

<style lang="scss" scoped>
    .homeLayout {
        .banner {
            width: 750rpx;
            padding: 30rpx 0;

            swiper {
                width: 750rpx;
                height: 340rpx;

                &-item {
                    padding: 0 30rpx;
                    width: 100%;
                    height: 100%;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 20rpx;
                    }
                }
            }
        }

        .notice {
            width: 690rpx;
            height: 80rpx;
            line-height: 80rpx;
            background-color: #eeeeee;
            margin: 0 auto;
            border-radius: 20rpx;
            display: flex;

            .left {
                width: 140rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .text {
                    padding: 0 10rpx;
                    color: $brand-theme-color;
                    font-size: 28rpx
                }
            }

            .center {
                flex: 1;

                swiper {
                    height: 80rpx;

                    swiper-item {
                        font-size: 34rpx;
                        color: #535353;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .right {
                width: 70rpx;
            }
        }

        .select {
            padding-top: 50rpx;

            .content {
                padding-top: 30rpx;
                width: 720rpx;
                margin-left: 30rpx;

                scroll-view {
                    white-space: nowrap;

                    .box {
                        width: 200rpx;
                        height: 430rpx;
                        display: inline-block;
                        margin-right: 15rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 15rpx;
                        }
                    }

                    .box:last-child {
                        margin-right: 30rpx;
                    }
                }

            }

            .time {
                color: #28b389;
                display: flex;
                align-items: center;
            }
        }

        .theme {
            padding: 50rpx 0;

            .more {
                color: #28b389;
                border-radius: 5rpx;
                font-size: 32rpx
            }

            .content {
                padding-top: 30rpx;
                margin: 0 30rpx;
                display: grid;
                gap: 15rpx;
                grid-template-columns: repeat(3, 1fr);
            }
        }

    }
</style>